import React, { Component } from 'react'
import { ListGroupItem, Row, Col } from 'react-bootstrap'
import intl from 'react-intl-universal'

class EvaluationItem extends Component {

  switchStar (star) {
    switch (star) {
      case 1:
        return <>{intl.get('wonderful')}</>
      case 2:
        return <>{intl.get('good')}</>
      case 3:
        return <>{intl.get('general')}</>
      case 4:
        return <>{intl.get('bad')}</>
      case 5:
        return <>{intl.get('very bad')}</>
      default:
    }
  }

  render () {
    const { evaluation } = this.props
    return (
      <ListGroupItem>
        <Row className = {'align-items-center'}>
          <Col lg = {6} style = {{ height: '74px', overflow: 'hidden' }}>
            <span>{evaluation.content}</span>
          </Col>
          <Col lg = {3}>
            <p>{new Date(evaluation.data).toLocaleDateString()}</p>
            <p>{this.switchStar(evaluation.star)}</p>
          </Col>
          <Col>
            <p dangerouslySetInnerHTML = {{ __html: evaluation.username }} />
          </Col>
        </Row>
      </ListGroupItem>
    )
  }
}

export default EvaluationItem
